<template>
  <div class="react">
      react
      <button @click="add">{{count}}</button>
      <p>{{double}} </p>
      <button @click="addNum">{{num}}</button>
  </div>
</template>

<script>
import {computed, reactive,toRefs} from 'vue'
export default {
    // reactive函数可以设置复杂数据类型的数据 跟页面使用
    setup() {
        const state = reactive({
            count:0,
            add(){
                state.count++
            },
            double:computed(()=>{
                return state.count*2
            }),
            num:2,
            addNum(){
                state.num++
            }
        })
        console.log(state);
        const refState = toRefs(state);
        console.log(refState);
        // torefs 可以将reactive函数创建的对象转化为模板能够解析的普通对象
        return {
            ...refState
        }
    }
}
</script>

<style>

</style>